<template>
	<view>
		
		<view class="my-order">
			<view class="list">
				<checkbox-group >
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<view @click="jumporderdetail"  :data-order_id="item.order_id">
						<view class="title acea-row row-between-wrapper" >
							<view class="acea-row row-middle">
								<text class="sign cart-color acea-row row-center-wrapper"
									v-if="item.bargain_id != 0">砍价</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.combination_id != 0">拼团</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.seckill_id != 0">秒杀</text>
								<text v-else>{{ item.module_type == 2 ? '门店' : '商城'}}</text>
								<text class="font-color-green"
									v-if="item.shipping_type == 2 && item.module_type == 1">-自提</text>
								<text
									style="font-size: 24rpx; color: #999; margin-left: 10rpx;">{{ item._add_time }}</text>
								<text class="gift" v-if="item.transfer_id > 0">礼物</text>
							</view>
						</view>
						<view class="item-info acea-row row-between row-top" v-for="(itemn, ind) in item.cartInfo"
							:key="ind">
							<view class="pictrue">
								<image :src="itemn.cart_info.productInfo.image" v-if="itemn.cart_info.productInfo"></image>
								<image :src="itemn.cart_info.image" v-else></image>
							</view>
							<view class="">
								<view class="text acea-row row-between" v-if="itemn.cart_info.productInfo">
									<view class="name line2">{{ itemn.cart_info.productInfo.store_name }}</view>
									<view class="money">
										<view v-if="itemn.cart_info.productInfo.attrInfo">
											￥{{ itemn.cart_info.productInfo.attrInfo.price }}</view>
										<view v-else>￥{{ itemn.cart_info.productInfo.price }}</view>
										<view>x{{ itemn.cart_num }}</view>
									</view>
								</view>
								<view class="text acea-row row-between" v-else style="margin-bottom: 30rpx;">
									<view class="name line2">{{ itemn.cart_info.title }}</view>
									<view class="money">
										<view v-if="itemn.cart_info.price">￥{{ itemn.cart_info.price }}</view>
										<view></view>
									</view>
								</view>
								<!-- 门店商品 -->
								<view v-if="itemn.cart_info.shopProductInfo && item.module_type == 2"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.shopAttrInfo.suk }}
								</view>
								<!-- 商城商品 -->
								<view v-if="itemn.cart_info.productInfo && item.module_type == 1"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.cart_info.productInfo.attrInfo.suk }}
								</view>
								<!-- 券包 -->
								<view class="acea-row row-between" style="font-size: 24rpx; color: #999;"
									v-if="item.module_type===3">
									<text>包含{{ itemn.cart_info.couponData.length }}张券</text>
									<text>共1件</text>
								</view>
							</view>
						</view>
						<view class="totalPrice">
							共{{ item.cartInfo.length || 0 }}件商品，总金额
							<text class="money font-color">￥{{ item.pay_price }}</text>
							<view class="">
		
								{{item.pay_type==="weixin"?'微信支付':item.pay_type==="yue"?'余额支付':'线下'}}
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			</view>
			<view class="" style="height:200rpx;">
				
			</view>
		</view>
		<home></home>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
	</view>
</template>


<script>
	import {
		getUserInfo,
		invoicedetails,
		orderinvoicelist
	} from '@/api/user.js';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			home,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				orderList:[],
				id: '',
				invoiceInfo: {},
				isClose: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				isopen:false
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.id = options.id

		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo();
				this.orderinvoicelist()
			} else {
				toLogin();
			}
		},
		onHide: function() {
			this.isClose = true;
		},
		onReady: function() {},
		methods: {
			// pages/users/order_details/index
			jumporderdetail(e){
				var {order_id} = e.currentTarget.dataset
				uni.navigateTo({
					url:`/pages/users/order_details/index?order_id=${order_id}`
				})
				
			},
			openevent(){
				this.isopen = !this.isopen
			},
			// 获取发票订单商品列表
			async orderinvoicelist(){
				var data = {
					id: this.id
				}
				var res = await orderinvoicelist(data)
				this.orderList = res.data
				console.log(res,"订单里欸博爱")
			},
		   // 获取发票详情
			getinvoicedetail() {
				console.log(this.id, 99)
				var data = {
					id: this.id
				}
				console.log(data)
				invoicedetails(data).then(res => {
					console.log(res)
					this.invoiceInfo = res.data
				})
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 登录授权回调
			 * 
			 */
			onLoadFun: function() {
				this.getUserInfo();
			},
			/**
			 * 获取用户信息
			 * 
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.payMode[1].number = res.data.now_money;
					that.$set(that, 'payMode', that.payMode);
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	
	
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
	}
	
	.font-color-green {
		color: #95c51b;
	}
	
	.font-color-gray {
		color: #999;
	}
	
	.my-order .header .picTxt {
		height: 190rpx;
	}
	
	.gift {
		background-color: #9AC83A;
		color: #fff;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
	
	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}
	
	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}
	
	.my-order .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}
	
	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}
	
	.my-order .nav {
		position: sticky;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		border-radius: 6rpx;
		margin: 0 auto 0 auto;
		z-index: 99;
	}
	
	.my-order .nav .item {
		display: flex;
		align-items: center;
		height: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		// padding: 27rpx 0;
		border-bottom: 5rpx solid transparent;
	}
	
	.my-order .nav .item.on {
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		/* #ifdef APP-PLUS */
		color: #000;
		/* #endif */
		border-color: #95c51b;
		color: #95c51b;
	}
	
	.my-order .nav .item .num {
		margin-top: 18rpx;
	}
	
	.my-order .list {
		width: 710rpx;
		margin: 14rpx auto 0 auto;
	}
	
	.my-order .list .item {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 14rpx;
		border: 1px solid #eee;
	}
	
	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
		justify-content: flex-start;
		
	}
	
	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 7rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}
	
	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}
	
	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}
	
	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}
	
	.my-order .list .item .item-info .text {
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}
	
	.my-order .list .item .item-info .text .name {
		width: 306rpx;
		color: #282828;
	}
	
	.my-order .list .item .item-info .text .money {
		text-align: right;
	}
	
	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}
	
	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	
	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}
</style>
<style>
	.qs-btn {
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		padding: 0 3%;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
	}
</style>
